<template>
  <div class="online-reserve">
    <BreadCrumb title="在线预定"></BreadCrumb>
    <div class="online-reserve-content">
      <el-card>
        <h1>房间信息列表</h1>
        <div class="box-card">
          <!-- <RoomCard class="room-card" v-for="item in roomTypeList"
            :key="item.roomTypeId"=======:key="item.id">>>>>>> qnr
            :roomTypeItem="item"
            ></RoomCard> -->
          <RoomCard class="room-card" v-for="item in roomTypeList" :key="item.roomTypeId" :roomTypeItem="item">
          </RoomCard>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRoomList, getLeisureRoom } from '@/api/room'
import BreadCrumb from '@/components/user/BreadCrumb.vue'
import RoomCard from '@/components/user/RoomCard.vue'
export default {
  name: 'OnlineReserve',
  components: {
    BreadCrumb,
    RoomCard
  },
  data() {
    return {
      roomTypeList: []
    }
  },
  // <<<<<<< HEAD
  //   created() {
  //     this.getRoomList()
  //   },
  //   methods: {
  //     async getRoomList() {
  //       this.roomTypeList = await getRoomList()
  //       console.log(this.roomTypeList)
  // =======
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getRoomList().then((res) => {
        this.roomTypeList = res
        console.log("this.roomTypeList")
        console.log(this.roomTypeList)
        for (let i = 0; i < this.roomTypeList.length; i++) {
          this.roomTypeList[i].leisureRoomList = []
          getLeisureRoom(this.roomTypeList[i].roomTypeId).then((res) => {
            res.forEach(element => {
              this.roomTypeList[i].leisureRoomList.push(element)
            })
            console.warn(this.roomTypeList)
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.online-reserve {
  .online-reserve-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-card {
      width: 94%;
    }

    h1 {
      padding: 5px 0;
      text-align: center;
      color: #67b7fb;
    }

    .box-card {
      display: flex;
      // justify-content: center;
      flex-wrap: wrap;

      .room-card {
        width: 23%;
        margin: 0 10px;
      }
    }
  }
}
</style>
